<script setup lang="ts">
import { ref, computed } from "vue";
import { useAppStoreHook } from "@/store/modules/app";

defineOptions({
  name: "LangSwitch"
});

interface Props {
  modelValue?: string;
}

interface Emits {
  (e: "update:modelValue", value: string): void;
  (e: "change", value: string): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: "zh"
});

const emit = defineEmits<Emits>();

const currentLang = computed({
  get: () => props.modelValue,
  set: (value: string) => {
    emit("update:modelValue", value);
    emit("change", value);
  }
});

const languages = [
  { key: "zh", label: "中文" },
  { key: "en", label: "English" }
];

const handleLanguageChange = (lang: string) => {
  currentLang.value = lang;
  useAppStoreHook().setLang(lang);
};
</script>

<template>
  <div class="lang-switch">
    <div class="switch-container">
      <div
        v-for="lang in languages"
        :key="lang.key"
        class="switch-item"
        :class="{ active: currentLang === lang.key }"
        @click="handleLanguageChange(lang.key)"
      >
        {{ lang.label }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.lang-switch {
  display: inline-block;

  .switch-container {
    display: flex;
    background: #4daaff;
    border-radius: 25px;
    padding: 2px;
    position: relative;
    overflow: hidden;

    .switch-item {
      flex: 1;
      padding: 0px 10px;
      text-align: center;
      color: white;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 20px;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
      min-width: 50px;

      &.active {
        background: white;
        color: #4daaff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      &:hover:not(.active) {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
}
</style>
